/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {Form, Input,  Radio, Select,Upload,Button ,DatePicker,TreeSelect } from 'antd';
import {connect} from 'dva';
import find from 'lodash/find'
import request from '@/utils/request';
import ReactDataGrid from 'react-data-grid';

const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      fileList: [],
      selectedRowKeys:[],
      selectedRow:{},
      all_annotations:{}
    };
  }
  componentDidMount() {
    const that=this
    request(`/all_workstations`, {
      method: 'get',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          data: response.data.data,
        },function() {
          for(let i=0;i<this.state.data.length;i++){
            if(this.props.valve_flowmeter_site_data.id===this.state.data[i].id){
              this.setState({
                selectedRowKeys:[i],
                selectedRow:this.state.data[i]
              })
            }
          }
        });
      }
    });
    request(`/all_annotations`, {
      method: 'get',
      params:{
        group:'construction_date'
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          all_annotations: response.data.data,
        });
      }
    });
  }
  renderTreeNodes=(data)=>{
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 10},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 14},
      }
    };
    const defaultColumnProperties = {
      resizable: true,
    };
    const {getFieldDecorator} = this.props.form;
    const data=this.state.data;
    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        formatter: (event) => {
          return <p className={'index'}>{(event.value + 1)}</p>;
        },
      },
      {
        name: '监控站点名称',
        width: 180,
        key: 'name',
      },
      {
        name: '监控站点模板',
        width: 180,
        key: 'template',
        formatter:(event)=>{
          let item=event.row
          let template = '未知';
          if (item.template === 1) {
            template = '双阀减压阀站点';
          } else if (item.template === 2) {
            template = '流量计站点';
          } else if (item.template === 3) {
            template = '水质检测站点';
          } else if (item.template === 4) {
            template = '电磁计量器站点';
          }else if (item.template === 5) {
            template = 'DN800电磁流量计(SNLD-DN800)';
          }else if (item.template === 6) {
            template = 'DN800电磁流量计(未知)';
          }else if (item.template === 7) {
            template = 'LDE-DN400-400(珠华)';
          }else if (item.template === 8) {
            template = 'JEER雷达水位计';
          }
          return template
        }
      },
      {
        name: '监控站点地址',
        width: 180,
        key: 'address',
      },
      {
        name: '操作',
        width: 98,
        key: 'right',
        classname: 'operate',
        formatter: (event) => {
          const id=event.row.id;
          const exit=find(this.state.all_annotations,(o)=>{
            if(o.value.valve_flowmeter_site_data&&o.value.valve_flowmeter_site_data.id){
              if(this.props.valve_flowmeter_site_data.id===o.value.valve_flowmeter_site_data.id){
                return false
              }
              return o.value.valve_flowmeter_site_data.id===id
            }else{
              return false
            }
          })
          if(exit){
            return '已被选择'
          }
          return <Button size={'small'} type={(this.state.selectedRowKeys.indexOf(event.row._index)>=0)?'danger':'primary'} onClick={()=>{
            if(this.state.selectedRowKeys.indexOf(event.row._index)>=0){
              this.setState({
                selectedRowKeys: [],
                selectedRow:{}
              })
            }else{
              this.setState({
                selectedRowKeys: [event.row._index],
                selectedRow:event.row
              })
            }
          }}>
            {(this.state.selectedRowKeys.indexOf(event.row._index)>=0)?'取消选择':'选择'}
          </Button>
        }
      }
    ].map(c => ({ ...defaultColumnProperties, ...c }));

    return (
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => {
            return { ...data[i], _index: i };
          }}
          rowsCount={data.length}
          minHeight={400}
          rowSelection={{
            showCheckbox: false,
            enableShiftSelect: true,
            selectBy: {
              indexes: this.state.selectedRowKeys,
            },
          }}
        />
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
